require('./PageBind.styl');

import { Control } from 'react-keeper'
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const Tickclock = require('components/tickclock');
const numberRegExp = /^(\d+\.\d*)|(\d+\.)|\d+/;
const { Boxs, Button, Group, TextField, Toast } = SaltUI;
const Loginlogo = require('images/svg/it.svg');
let HBox = Boxs.HBox;
let Box = Boxs.Box;
const ui = require('clientConfig/util/jsapi/ui')
class Bind extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            t2: '',
            tel: '',//手机号
            number2: ''//验证码
        };
    }
    numberFilter(data_id, originValue) {
        let matches = originValue.match(numberRegExp);
        let tel = '';
        let number2 = '';
        if (matches && data_id == 1) {
            tel = matches[0];
            return tel;
        }
        if (matches && data_id == 2) {
            number2 = matches[0];
            return number2;
        }
    }
    handleNumberChange(data_id, newValue) {
        data_id == 1 && this.setState({
            tel: newValue
        });
        data_id == 2 && this.setState({
            number2: newValue
        });
    }
    handleNumberBlur(data_id, originValue) {
        data_id == 1 && this.setState({
            tel: originValue.replace(/\.$/, '').replace(/^0*([0-9]+)/, '$1')
        });
        data_id == 2 && this.setState({
            number2: originValue.replace(/\.$/, '').replace(/^0*([0-9]+)/, '$1')
        });
    }
    //校验短信 次数1次验证3分钟
    handleSumbmit() {
        //   Control.go('/home');
        if (this.state.tel && this.state.number2) {
            let tel = this.state.tel;
            let code = this.state.number2;
            Actions.sumbmit({tel,code});
        } else if(!this.state.tel) {
            Toast.show({
                type: 'error',
                content: '手机号为空'
            });
        }else if(!this.state.number2) {
            Toast.show({
                type: 'error',
                content: '验证码为空'
            });
        }
    }


    render() {
        let t = this;
        return (
            <div className="bind">
                <div className="t-FAC">
                    <Loginlogo className="login-logo"   />
                </div>
                <div className="t-FAC form t-SML23 t-SMR21">
                    <HBox>
                        <Box flex={1}  >
                            <Group.List >
                                <TextField
                                    label="手机号:"
                                    placeholder="请输入手机号"
                                    filter={t.numberFilter.bind(t, 1)}
                                    value={t.state.tel}
                                    onBlur={t.handleNumberBlur.bind(t, 1)}
                                    onChange={t.handleNumberChange.bind(t, 1)}
                                />
                            </Group.List >
                        </Box>
                        <Box flex={0.5} className="t-FAR" >
                            <Tickclock tel={this.state.tel} />
                        </Box>
                    </HBox>
                    <HBox className='t-MT5 '>
                        <Box flex={1}  >
                            <Group.List >
                                <TextField label="验证码:"
                                    placeholder="输入您的验证码"
                                    filter={t.numberFilter.bind(t, 2)}
                                    value={t.state.number2}
                                    onBlur={t.handleNumberBlur.bind(t, 2)}
                                    onChange={t.handleNumberChange.bind(t, 2)}
                                />
                            </Group.List >
                        </Box>
                        
                    </HBox>
                    <div><div className="putin t-FAC" onClick={t.handleSumbmit.bind(t)}>登录</div></div>
                </div>
            </div>
        );
    }

    componentWillMount() {
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            if (isSuccessed) {
                ui.close();
            }
        });
        ui.setTitle({ title:"登录" });
    }

    componentDidMount() {
      
        
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        ui.setLeft({ control: false, text: '返回' }, (isSuccessed, result) => {
        })
    }
}

reactMixin.onClass(Bind, Reflux.connect(Store, 'Bind'));

module.exports = Bind;
